<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Merchant</title>
<link href="${pageContext.request.contextPath }/css/bootstrap.min.css"
	rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/css/index.css"
	rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/font-awesome.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/menu-style.css">
</head>
<body>
	<div class="contain">
	<c:import url="header.jsp"></c:import>
		
		<!--   图片轮换-->
		<div id="demo">
			<div id="indemo">
				<div id="demo1">
					<a href="">
						<p>
							<img src="images/1.jpg" alt="" />
						</p>
					</a> <a href="">
						<p>
							<img src="images/2.jpg" alt="" />
						</p>
					</a> <a href="">
						<p>
							<img src="images/3.jpg" alt="" />
						</p>
					</a> <a href="">
						<p>
							<img src="images/4.jpg" alt="" />
						</p>
					</a> <a href="">
						<p>
							<img src="images/5.jpg" alt="" />
						</p>
					</a>
				</div>
				<div id="demo2"></div>
			</div>
		</div>
		<c:import url="menu.jsp"></c:import>
		<div class="container ">
			<!--   <c:forEach var="d" items="${dLish }" >
   <img alt="" src="${d.img }" class="pic">
   </c:forEach>-->
			<div class="row all-merchant">


				<c:forEach var="m" items="${mList }">
					<div class="col-sm-6 col-md-3">
						<div class="list-mer-logo">
							<a href="merchant/${m.mId }">
								<div class="info">
									<h3><span class="fa fa-user-secret"></span>  ${m.mName}</h3>
									<h4><span class="fa fa-star"></span>  ${ m.grade}</h4>
								</div> <img src="${pageContext.request.contextPath }/${m.logo} "
								alt="${m.mName}" class="mer-logo">
							</a>
						</div>
					</div>

				</c:forEach>
			</div>
		</div>
		<!--container end-->
	</div>
	<!--contain end-->
	<div class="footer"></div>
	<!--footer end-->
</body>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
<script src='${pageContext.request.contextPath }/js/TweenMax.min.js'></script>
<script src="${pageContext.request.contextPath }/js/menu-script.js"></script>
<script>

	$(document).ready(function() {
		huandeng()
	})

	function huandeng() {

		var speed = 20; //数字越大速度越慢
		var tab = document.getElementById("demo");
		var tab1 = document.getElementById("demo1");
		var tab2 = document.getElementById("demo2");
		tab2.innerHTML = tab1.innerHTML;
		// console.log(tab.scrollLeft)
		function Marquee() {
			if (tab2.offsetWidth - tab.scrollLeft <= 0)
				tab.scrollLeft -= tab1.offsetWidth
			else {
				tab.scrollLeft++;
			}
		}
		var MyMar = setInterval(Marquee, speed);
		tab.onmouseover = function() {
			clearInterval(MyMar)
		};
		tab.onmouseout = function() {
			MyMar = setInterval(Marquee, speed)
		};
	}
</script>
</html>